<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
#w{
	-webkit-user-select: none;
	width: 500px; 
	height: 400px;
	background: black;
	font-size: 38px;
	font-weight: bold;
	color: orange;
}
</style>
<body>
	<h4>tap doubletap swipe drag transform hold等手势</h4>
	<div id="w" class="ww"></div>
	<div id="currentPos"></div>
	<div id="preTouchPos"></div>
	<script type="text/javascript">

	</script>
	<script type="text/javascript" src="js/JM.js"></script>
	<script type="text/javascript">
	
		var wobj = JM.dom.id("w");
		JM.event.on(wobj,"touchmove touchstart touchend",function(e){
			e.stopPropagation();
			e.preventDefault();
		});

		JM.event.on(wobj,"hold",function(e){
			// alert(e.position.x+" "+ e.position.y);
			wobj.innerHTML="hold";
		});
		JM.event.on(wobj,"tap",function(e){
			if(e.isDoubleTap) wobj.innerHTML="doubletap";
			// alert(e.position.x);
			else wobj.innerHTML="tap";
		});
		JM.event.on(wobj,{
			dragstart:function() {
				wobj.innerHTML="dragstart";
			},
			drag:function(e){

				//console.log(e.angle);
				wobj.innerHTML="drag";
			},
			dragend:function(e){
				// alert(e.distance + " " + e.angle);
				wobj.innerHTML="dragend";
			},
			swipe:function(e){
				wobj.innerHTML="swipe" + e.direction ;
			},
			transformstart:function(e){
				// J.dom.id("preTouchPos").innerHTML = (e.position.x);
				wobj.innerHTML="transformstart";
			},
			transform:function(e){
				wobj.innerHTML="transform: "
							   +"scale:" + e.scale 
							   +"<br/>"
							   +"rotation:" + e.rotation;
			    wobj.style["-webkit-transform"] = "rotate("+e.rotation+"deg) scale("+e.scale+")";
			},
			transformend:function(e){
				// alert(e.rotation);
				wobj.innerHTML="transformend";
			}
		});
	</script>

</body>
</html>